<template>
  <view class="content-box">
    <u-sticky offset-top="0" class="u_sticky_top">
      <u-search class="search" placeholder="请输入搜索信息" :showAction="true" actionText="取消" :animation="true" @focus="focusFn" @custom="cancelFn" @clear="clearFn" input-align="center" shape="square" :show-action="false" v-model="keyWords"> </u-search>

      <view class="header">
        <view class="header_left"> <image src="../../../static/images/mine/collect.svg"></image><text>收藏内容</text></view>
        <view class="header_right" @click="screenFn">
          <text>筛选</text>
          <image :src="screenFlag ? '../../../static/images/home/screen_blue.svg' : '../../../static/images/home/screen_gray.svg'" mode=""></image>
        </view>
      </view>
    </u-sticky>
    <view class="screen_content">
      <view class="screen_lists">
        <view class="screen_list" v-for="(item, index) in processList" :key="index">
          <image class="like-icon" @click="collectionFn(item)" src="../../../static/images/start1.svg"></image>
          <view class="screen_title_info" @click="handlePreview(item, true)">
            <view class="screen_title more-line-clamp3">
              {{ item.fileName }}
            </view>
            <view class="screen_version">
              <text v-if="item.author">{{ item.author }}</text>
              <text>{{ item.updateTime }}</text>
              <text>{{ item.fileVersion }} {{ item.versionStatusName }}</text>
            </view>
          </view>
          <image class="screen_type" :src="knowImage1(item.fileTypeId)"></image>
        </view>
        <view v-if="loadmore && processList != []" class="loadMore">—已加载全部—</view>
      </view>

      <view v-if="processList && processList.length === 0" class="screen_list_empty">
        <image src="../../../static/images/empty.svg"></image>
      </view>
    </view>

    <!-- 筛选弹窗 -->
    <u-popup :show="show" @close="closePopup" :round="10" mode="bottom">
      <view class="screen_model">
        <view class="screen_model_title">筛选</view>
        <view class="screen_model_box">
          <view class="screen_model_box_title"><image src="../../../static/images/home/model_blue.svg"></image>专业类型</view>
          <view class="u-page__tag-item">
            <view class="tag one-line-clamp" v-for="(item, index) in professionList" :key="'profession' + index" :class="item.checked ? 'tag_blue' : 'tag_gray'" @click="professionClick(index)">
              {{ item.text }}
            </view>
          </view>
        </view>
        <view class="screen_model_box">
          <view class="screen_model_box_title"><image src="../../../static/images/home/model_orange.svg"></image>文件类型</view>
          <view class="u-page__tag-item">
            <view class="tag one-line-clamp" v-for="(item, index) in fileTypeList" :key="'fileType' + index" :class="item.checked ? 'tag_blue' : 'tag_gray'" @click="fileTypeClick(index)">
              {{ item.text }}
            </view>
          </view>
        </view>
        <view class="screen_model_bottom">
          <u-button text="清空" @click="emptyFn"></u-button>
          <u-button type="primary" text="确定" @click="sureFn"></u-button>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
export default {
  onLoad: function () {
    this.getData();
  },

  data() {
    return {
      screenFlag: false,
      isSearch: false,
      isProgress: false,
      show: false, //筛选弹窗
      keyWords: "",
      orderBy: "1",
      sort: "asc",
      typeList: "",
      profession: "",
      pageNumber: 1,
      pageSize: 10,
      totalPage: 0,
      totalSize: 0,
      processList: [],
      fileTypeList: [],
      professionList: [],
      orderByList: [
        {
          text: "相关性",
          checked: false,
          id: 1,
        },
        {
          text: "更新日期",
          checked: false,
          id: 2,
        },
        {
          text: "总收藏数",
          checked: false,
          id: 3,
        },
      ],
      loadmore: false,
    };
  },
  onPullDownRefresh() {
    this.pageNumber = 1;
    this.pageSize = 10;
    this.totalPage = 0;
    this.totalSize = 0;
    this.getData();
    setTimeout(() => {
      this.loadmore = false;
      uni.stopPullDownRefresh();
    }, 1000);
  },
  onReachBottom() {
    if (this.pageNumber >= this.totalPage && this.totalPage > 0) {
      this.loadmore = true;
      return;
    }
    this.pageNumber = this.pageNumber + 1;
    if (this.pageNumber > this.totalPage) {
    } else {
      this.getData();
    }
  },
  computed: {
    knowImage1() {
      return (item) => {
        if (item == 31) {
          return require("@/static/images/home/knowl1.svg");
        }
        if (item == "32") {
          return require("@/static/images/home/knowl2.svg");
        }
        if (item == "33") {
          return require("@/static/images/home/knowl3.svg");
        }
        if (item == "34") {
          return require("@/static/images/home/knowl4.svg");
        }
        if (item == "38") {
          return require("@/static/images/home/knowl5.svg");
        } else {
            return require("@/static/images/home/knowl6.svg");
        }
      };
    },
  },
  watch: {
    keyWords: {
      handler(newVal, oldVal) {
        if (newVal) {
          this.isProgress = true;
          this.getData();
        }
      },
    },
  },
  mounted() {
    this.fileTypeListFn();
    this.professionListFn();
  },
  methods: {
    //文件字典
    fileTypeListFn() {
      this.$request({
        url: "/dict/file/list",
        method: "get",
        params: {},
      }).then(({ data }) => {
        data.data.forEach((item) => {
          this.fileTypeList.push({
            value: item.id,
            text: item.name,
            dictType: item.dictType,
            dictCode: item.dictCode,
            checked: false,
          });
        });
      });
    },
    //专业字典
    professionListFn() {
      this.$request({
        url: "/dict/major/list",
        method: "GET",
        params: {},
      }).then(({ data }) => {
        data.data.forEach((item) => {
          this.professionList.push({
            value: item.id,
            text: item.name,
            dictCode: item.dictCode,
            checked: false,
          });
        });
      });
    },
    getData() {
      this.$request({
        url: "/knowledgeCollect/list",
        method: "GET",
        params: {
          keyWords: this.keyWords,
          orderBy: this.orderBy,
          pageNumber: this.pageNumber,
          pageSize: this.pageSize,
          professionList: this.profession,
          sort: this.sort,
          typeList: this.typeList,
        },
      }).then(({ data }) => {
        if (this.pageNumber === 1) {
          this.processList = [];
        }
        this.totalPage = data.totalPage;
        this.totalSize = data.totalSize;
        if (data.data) {
          this.processList = this.processList.concat(data.data);
        }
      });
    },

    getImage(type) {
      let src = "";
      switch (type) {
        case "xlsx":
        case "xls":
          src = "iconxlsxlsx.png";
          break;
        case "jpg":
        case "png":
          src = "iconjpgpnggif.png";
          break;
        case "docx":
        case "doc":
          src = "icondocdocx.png";
          break;
        case "mp4":
          src = "iconvideo.png";
          break;
        case "wps":
          src = "iconwps.png";
          break;
        case "ofd":
          src = "iconofd.png";
          break;
        case "ppt":
        case "pptx":
          src = "iconpptpptx.png";
          break;
        case "pdf":
          src = "iconpdf.png";
          break;
        case "txt":
          src = "iconTXT.png";
          break;
        case "zip":
          src = "iconrarzip.png";
          break;
        default:
          src = "iconbianzu.png";
      }
      return src;
    },

    focusFn() {
      this.isSearch = !this.isSearch;
    },
    cancelFn() {
      console.log("取消按钮");
      this.isSearch = false;
      this.isProgress = false;
      this.keyWords = "";
      /*this.pageNumber = 1
				this.totalPage = 0
				this.totalSize = 0 */
      this.getData();
    },
    clearFn() {
      this.isSearch = false;
      this.isProgress = false;
      this.keyWords = "";
      this.pageNumber = 1;
      this.totalPage = 0;
      this.totalSize = 0;
      this.getData();
    },
    screenFn() {
      this.show = true;
    },
    closePopup() {
      this.show = false;
    },
    collectionFn(item) {
      let that = this;
      uni.showModal({
        title: "提示",
        content: "确认取消收藏该数据吗？",
        success: function (res) {
          if (res.confirm) {
            that
              .$request({
                url: "/knowledgeCollect/delete",
                method: "post",
                data: {
                  collectType: "2",
                  knowledgeFileId: item.id,
                },
              })
              .then(({ data }) => {
                that.$toast("已取消收藏");
                setTimeout(() => {
                  this.$modal.closeLoading();
                }, 1000);
                that.pageNumber = 1;
                that.totalPage = 0;
                that.totalSize = 0;
                that.getData();
              });
          } else if (res.cancel) {
            console.log("用户点击取消");
          }
        },
      });
    },
    professionClick(text) {
      this.professionList[text].checked = !this.professionList[text].checked;
    },
    fileTypeClick(text) {
      this.fileTypeList[text].checked = !this.fileTypeList[text].checked;
    },
    orderByClick(text) {
      this.orderByList[text].checked = !this.orderByList[text].checked;
    },
    emptyFn() {
      this.fileTypeList.forEach((item) => {
        item.checked = false;
      });
      this.professionList.forEach((item) => {
        item.checked = false;
      });
      this.screenFlag = false;
      this.typeList = "";
      this.profession = "";
      this.show = false;
      this.pageNumber = 1;
      this.totalPage = 0;
      this.totalSize = 0;
      this.getData();
    },
    sureFn() {
      let fileTypeList = this.fileTypeList.filter((item) => item.checked);
      this.typeList = fileTypeList
        .map((item) => {
          return item.value;
        })
        .join(",");
      let professionList = this.professionList.filter((item) => item.checked);
      this.profession = professionList
        .map((item) => {
          return item.value;
        })
        .join(",");
      this.show = false;
      if (this.typeList || this.profession) {
        this.screenFlag = true;
      } else {
        this.screenFlag = false;
      }
      this.pageNumber = 1;
      this.totalPage = 0;
      this.totalSize = 0;
      this.getData();
    },

    handlePreview(item, search) {
      console.log(item, "进入详情页");
      if (item.fileTypeId == 35) {
        this.$tab.navigateTo(
          `/pages/fileManage/updateVideo?uploadForm=${encodeURIComponent(
            JSON.stringify({
              ...item,
              methods: "videoUpdate",
              origin: "collect"
            })
          )}`
        );
        return;
      }
      this.$request({
        url: "/knowledgeData/release/preview",
        method: "get",
        params: {
          id: item.id,
        },
      }).then(({ data }) => {
        console.log(data, "fff");
        if (data.readAuthority == false) {
          this.$toast(data.message);
          setTimeout(() => {
            this.$modal.closeLoading();
          }, 1000);
          return;
        }

        console.log(item, "预览文件");
        if (item.fileType == "video") {
          uni.navigateTo({
            url: `/pages/player?info=` + encodeURIComponent(JSON.stringify(item)),
          });
        }
        // 指导书需要跳转的地方
        else if (Number(item.fileTypeId) === 34) {
          uni.navigateTo({
            url: `/pages/guideBookPreview?info=` + encodeURIComponent(JSON.stringify(item)),
          });
        } else if (item.fileTypeId == 38) {
          uni.navigateTo({
            url: `/pages/player?info=` + encodeURIComponent(JSON.stringify(item)),
          });
        } else if (item.fileTypeId == 32) {
          uni.navigateTo({
            url: `/pages/page2Preview?info=` + encodeURIComponent(JSON.stringify(item)),
          });
        } else {
          uni.navigateTo({
            url: `/pages/page1Preview?info=` + encodeURIComponent(JSON.stringify(item)),
          });
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.header {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 38rpx;
  padding-bottom: 22rpx;
  font-size: 32rpx;
  .header_left {
    font-weight: 500;
    display: flex;
    align-items: center;
    font-family: Source Han Sans;
    image {
      width: 44rpx;
      height: 42rpx;
      margin-right: 20rpx;
      display: inline-block;
    }
  }
  .header_right {
    font-weight: 400;
    display: flex;
    align-items: center;
    font-family: Source Han Sans;
    image {
      width: 26rpx;
      height: 26rpx;
      margin-left: 20rpx;
      display: inline-block;
    }
  }
}

.screen_content {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: space-between;
  width: 100%;

  .screen_lists {
    width: 100%;
    background: #ffffff;
    border-radius: 16rpx;

    .screen_lists_item {
      padding: 20rpx 0;
      & + .screen_lists_item {
        border-top: 1px solid #eaecef;
      }
    }
    .screen_list {
      width: 100%;
      display: grid;
      grid-template-columns: 44rpx 1fr 124rpx;
      grid-column-gap: 30rpx;
      align-items: center;
      padding: 26rpx 24rpx 20rpx;

      position: relative;
      & + .screen_list {
        &::before {
          content: "";
          position: absolute;
          height: 1px;
          background: #eaecef;
          left: 20rpx;
          top: 0;
          right: 20rpx;
        }
      }
      .like-icon {
        width: 44rpx;
        height: 44rpx;
      }
      .screen_title_info {
        display: flex;
        flex-direction: column;
        font-family: Source Han Sans;
        .screen_title {
          width: 100%;
          font-weight: 500;
          font-size: 30rpx;
          box-sizing: border-box;
          text-align: justify;
          margin-bottom: 20rpx;
        }

        .screen_version {
          font-size: 24rpx;
          color: #4c5a67;
          font-family: 思源黑体;
          //padding-left: 20rpx;
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(0rpx, 1fr));
          grid-column-gap: 24rpx;
          white-space: nowrap;
        }
      }

      .screen_type {
        width: 94rpx;
        height: 124rpx;
        align-self: start;
      }
    }
    .screen_info {
      width: 100%;
      margin-top: 10rpx;
      font-size: 26rpx;
      padding: 0 20rpx 0 74rpx;
      text-align: justify;
      line-height: 1.5;
    }
    .screen_bottom {
      width: 60px;
      height: 20px;
      border-radius: 6px;
      font-size: 24rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 20rpx 0 0 74rpx;
      &.gray {
        background: #f4f6f9;
        color: #4c5a67;
      }
      &.blue {
        background: #e8f8ff;
        color: #0084ff;
      }
    }
  }
  .screen_list_empty {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    image {
      width: 224rpx;
      height: 338rpx;
    }
  }
}

.screen_model {
  padding: 0 20rpx 20rpx;
  position: relative;
  box-sizing: border-box;
  max-height: 100vh;
  overflow-y: auto;
  .screen_model_box {
    .screen_model_box_title {
      display: flex;
      align-items: center;
      font-weight: bold;
      font-family: Source Han Sans;
      font-size: 16px;
      height: 108rpx;
      line-height: 108rpx;
    }
    image {
      width: 44rpx;
      height: 36rpx;
      margin-right: 20rpx;
    }
  }

  .screen_model_title {
    font-size: 32rpx;
    text-align: center;
    font-family: Source Han Sans;
    font-weight: bold;
    line-height: 64rpx;
    padding: 20rpx 0;
    border-bottom: 1rpx solid #e3dfdf;
    position: sticky;
    top: 0;
    background: #fff;
    z-index: 999;
  }

  .u-page__tag-item {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    // justify-content: space-between;
    text-align: center;
    //gap: 25rpx;

    .tag {
      width: calc((100% - 78rpx) / 3);
      height: 35px;
      line-height: 35px;
      border-radius: 8px;
      font-family: Source Han Sans;
      font-size: 15px;
      word-break: break-all;
      padding: 0 10rpx;
      margin: 13rpx;
      &.tag_gray {
        background: #f6f6f6;
        color: #1c2126;
      }
      &.tag_blue {
        background: #e8f8ff;
        color: #0084ff;
      }
    }
  }

  .screen_model_bottom {
    width: 100%;
    display: flex;
    justify-content: space-between;
    margin-top: 50rpx;
    position: sticky;
    bottom: 0;
    background: #ffffff;
    padding: 10px;
    .u-button {
      width: 45%;
      border-radius: 16rpx;
      border-width: 1rpx;
    }
  }
}

.content-box {
  width: 100%;
  padding: 0 20rpx 20rpx;
  height: auto;
  //overflow-y: auto;
  position: relative;
  ::v-deep .u-search__content__input {
    background: #ffffff !important;
  }
  ::v-deep .u-search__content {
    background: #ffffff !important;
    border-radius: 120rpx !important;
    border: 1rpx solid #0084ff !important;
  }
  .u_sticky_top {
    background: #f5f7fb !important;
    border-top: 40rpx solid #f5f7fb;
  }
}

::v-deep .uni-input-placeholder,
::v-deep .uni-input-input {
  text-align: left;
  font-family: Arial;
  font-size: 30rpx;
}

.loadMore {
  color: #b5b5b5;
  line-height: 2;
  font-size: 12px;
  text-align: center;
}
.more-line-clamp3 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: justify;
}
.more-line-clamp {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 999;
  overflow: hidden;
  text-overflow: ellipsis;
    text-align: justify;
}
.one-line-clamp {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>
